<template>
  <div>
  <el-table :data="tableData">
    <el-table-column
        prop="date"
        label="日期"
    />
    <el-table-column
        prop="name"
        label="姓名"
        width="180"
    />
    <el-table-column
        prop="address"
        label="地址"
    />

    <el-table-column label="操作">
      <template slot-scope="{row}">
       <el-button size="mini" type="danger" @click="handlingDelete(row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

    <p>demo包含功能</p>
    <br>
    <p>左侧无限滚动: （该组件支持开发者高度定制化，具有极高的耦合度，建议阅读代码）</p>
    <p>用户拖动功能: （该组件支持用户自由拖动分界线以展示用户更想要看到的信息）</p>
    <br>
    <p>demo技术亮点介绍</p>
    <br>
    <p>该项目基于vue2.6.14版本进行开发</p>
    <p>其中拥有两个高度封装的公共组件，并使用组件间的传值技术进行了数据互通</p>
    <p>利用了vue中的生命周期，挂载窗口的监听以及卸载（避免出现性能浪费和内存溢出）</p>
    <p>使用js进行函数封装，让函数更加通用，让代码更加简洁便于阅读</p>
    <p>element进行按需加载，项目打包体积更小，首次加载更快，项目占用内存更小</p>
    <p>使用模块化思想进行开发，易于日后迭代和代码维护，便于开发者更加精准的进行定位，减少开发时间的成本。</p>
    <p>css动画的加入让项目中的互动更加流畅，增强用户视觉的体验，使用不同的阴影技术让用户更加快速的了解功能的使用</p>
    <p>数据来源：随机生成，生成代码详见/utils/data</p>
    <br>
    <br>
    <p>用更简洁，更健壮的代码和更高的性能，实现更复杂的业务</p>
    <p>如果有需要添加的功能或者需求，请联系邮箱</p>
    <br>
    <p>在技术日异月新的今天，请让我们一起进步。</p>
    <br>
    <p>技术讨论邮箱：guojixin1212@163.com</p>
    <p></p>

</div>
</template>

<script>
export default {
  name: 'JxTable',
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }]
    }
  },
  methods:{
    handlingDelete(row){
      alert(`删除${row.name}的数据`)
    }
  }
}
</script>

<style scoped>

</style>